<template>
  <div class="app-container operateStats">
    <card
      leftTitle="系统"
      centerTitle="访问端"
      rightTitle="版本管理"
      :centerIlabel="centerIlabel"
      :rightIlabel="rightIlabel"
    >
      <template #left>
        <div class="title">系统</div>
        <div class="caidan">
          <div>
            <el-tree
              :data="treeData"
              node-key="roleTree"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              :props="defaultProps"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <i
                  :class="data.icon"
                  style="margin-right: 10px"
                  v-if="!svgData.includes(data.icon)"
                ></i>
                <svg-icon
                  :icon-class="data.icon"
                  style="margin-right: 10px"
                  v-else
                />
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </div>
      </template>
      <template #center>
        <div class="title">访问端</div>
        <div class="caidan">
          <div>
            <el-tree
              :data="treeTwoData"
              node-key="roleTree"
              :expand-on-click-node="false"
              @node-click="handleNodeClickTwo"
              :props="defaultTwoProps"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <i
                  :class="data.icon"
                  style="margin-right: 10px"
                  v-if="!svgData.includes(data.icon)"
                ></i>
                <svg-icon
                  :icon-class="data.icon"
                  style="margin-right: 10px"
                  v-else
                />
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </div>
      </template>
      <template #right>
        <EtopSearch
          :options="options"
          @getData="searchFn"
          @resettingFn="resettingFn"
          :btnDisabled="!rightIlabel"
        />
        <el-button
          type="primary"
          @click="openDlFn('', 'edit')"
          size="small"
          :disabled="!rightIlabel"
          >新增</el-button
        >
        <ETable
          ref="ETable"
          style="margin-top: 20px"
          :height="370"
          :titleObj="titleObj"
          @sortFun="sortFun"
          operateWidth="250"
          :reqObj="setThreeOf"
          :reqFn="getVsVersion"
          :sortData="sortData"
          adjacent
        >
          <template v-slot="{ scope }">
            <el-button
              type="text"
              size="small"
              @click="openDlFn(scope, 'edit')"
            >
              修改
            </el-button>
            <el-divider
              direction="vertical"
              v-if="scope.isCurr != 1"
            ></el-divider>
            <el-button
              type="text"
              size="small"
              @click="selectFn(scope)"
              v-if="scope.isCurr != 1"
            >
              设为当前版本
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              size="small"
              @click="openDlFn(scope, 'versionRecord')"
            >
              版本记录
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" size="small" @click="delFn(scope)">
              删除
            </el-button>
          </template></ETable
        >
      </template>
    </card>
    <edit ref="edit"></edit>
    <versionRecord ref="versionRecord"></versionRecord>
  </div>
</template>

<script>
import EtopSearch from "@/components/EtopSearch";
import card from "./components/card.vue";
import edit from "./components/edit.vue";
import versionRecord from "./components/versionRecord.vue";
import ETable from "@/components/ETable";
import { getSysSystem, getSysSystemAccess } from "@/api/management/system";
import {
  getVsVersion,
  getVsVersionDoAble,
  deleteVsVersion,
} from "@/api/management/versioning";
export default {
  name: "versioning",
  components: {
    card,
    edit,
    ETable,
    versionRecord,
    EtopSearch,
  },
  data() {
    return {
      // 本地svg数组
      svgData: [
        "tree",
        "form",
        "link",
        "nested",
        "table",
        "pay",
        "monitor",
        "parking",
        "eye-open",
      ],

      // ----------------------------- 左侧 -----------------------------
      // tree 数据
      treeData: [],
      defaultProps: {
        children: "children",
        label: "SYSTEM_NAME",
      },
      setOf: {
        // 系统编码
        systemCode: "",
      },

      // ----------------------------- 中侧 -----------------------------
      // 中间红色显示左侧选中
      centerIlabel: "",
      // tree 数据
      treeTwoData: [],
      defaultTwoProps: {
        children: "children",
        label: "ACCESS_TYPE_NAME",
      },

      // -----------------------------右边 -----------------------------
      rightIlabel: "",
      setThreeOf: {
        systemAccessId: "",
        versionName: "",
        versionCode: "",
        sortStr: "&sortList[0].sortName=versionCode&sortList[0].sortType=desc",
      },
      // 表格排序
      sortData: {
        len: 8,
        column: ["versionCode"],
        orders: ["descending"],
      },
      // 表格头部
      titleObj: [
        {
          prop: "versionCode",
          label: "版本编号",
          width: "120",
          sortable: "custom",
        },
        {
          prop: "versionName",
          label: "版本名称",
          minWidth: "160",
        },
        {
          prop: "isCurr",
          label: "当前版本",
          width: "120",
          formatter: (scope) => this.fmStatus(scope, "isCurr"),
        },
        {
          prop: "releaseDate",
          label: "发布日期",
          width: "110",
          sortable: "custom",
        },
        {
          prop: "isForceUpdate",
          label: "强制升级",
          width: "120",
          formatter: (scope) => this.fmStatus(scope, "isForceUpdate"),
        },
      ],
      options: [
        {
          type: "input",
          name: "版本名称：",
          key: "versionName",
          value: "",
        },
        {
          type: "input",
          name: "版本编号：",
          key: "versionCode",
          value: "",
        },
      ],
    };
  },
  created() {
    // 获取左侧 tree 数
    this.getTreeData();
  },
  methods: {
    // ------------------------------- 左侧 -------------------------------
    //  获取数据
    async getTreeData() {
      let res = await getSysSystem({
        currPage: 1,
        pageSize: 999999,
      });
      if (res.data && res.data.bdata.total > 0) {
        this.treeData = res.data.bdata.gdata;
      } else {
        this.treeData = [];
      }
    },
    // 行点击
    handleNodeClick(scope) {
      this.centerIlabel = scope.SYSTEM_NAME;
      this.setOf.systemCode = scope.SYSTEM_CODE;
      // 获取中间表格
      this.getTwoData();
    },

    // ------------------------------- 中间 -------------------------------
    // 查询方法
    async getTwoData() {
      let res = await getSysSystemAccess({
        systemCode: this.setOf.systemCode,
        currPage: 1,
        pageSize: 999999,
      });
      if (res.data && res.data.bdata.total > 0) {
        this.treeTwoData = res.data.bdata.gdata;
      } else {
        this.treeTwoData = [];
      }
    },
    // 行点击
    handleNodeClickTwo(scope) {
      this.rightIlabel = scope.ACCESS_TYPE_NAME;
      this.setThreeOf.systemAccessId = scope.ID;
      // 获取右侧数据
      this.getData();
    },

    // ------------------------------- 右侧 -------------------------------
    getVsVersion,
    async getData() {
      this.$refs.ETable.getData();
    },
    // 查询
    searchFn(val) {
      if (!this.rightIlabel) return this.$message.error("请选择巡检人员");
      // 如果在第四页搜索会把页码4传过去没数据，所以搜索变成1
      this.$refs.ETable.pageInfo.page = 1;
      // 保存传递出来的搜索数据，用于表格请求
      for (let key in val) {
        this.setThreeOf[key] = val[key];
      }
      this.getData();
    },
    // 重置方法
    resettingFn() {
      // 重置搜索数据以及搜索框的options数据
      this.options.forEach((element) => (element.value = ""));
      this.setThreeOf.versionName = "";
      this.setThreeOf.versionCode = "";
    },
    // 表格排序方法
    sortFun(str) {
      this.setThreeOf.sortStr = str;
      this.getData();
    },
    // 选中
    async selectFn(scope) {
      let t = await this.$confirm("是否设置为当前版本?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await getVsVersionDoAble(scope.id);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success(`${res.data.bmsg}`);
          this.getData();
        }
      }
    },
    // 删除
    async delFn(scope) {
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await deleteVsVersion(scope.id);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success(`${res.data.bmsg}`);
          // 页数大于一页并且当前页只有一条数据，删除后页数-1
          if (
            this.$refs.ETable.pageInfo.total %
              this.$refs.ETable.pageInfo.size ===
              1 &&
            this.$refs.ETable.pageInfo.page > 1
          ) {
            this.$refs.ETable.pageInfo.page -= 1;
          }
          this.getData();
        }
      }
    },
    // 弹框
    openDlFn(scope, name) {
      scope = scope ? scope : {};
      scope.systemAccessId = this.setThreeOf.systemAccessId;
      this.$refs[name].openFn(scope);
    },
    fmStatus(scope, name) {
      return (
        <span style={{ color: scope[name] == 1 ? "black" : "red" }}>
          {scope[name] == 1 ? "是" : "否"}
        </span>
      );
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 14px;
  background-color: #66b1ff;
  color: #fff;
}
.caidan {
  width: 100%;
  height: calc(100% - 50px);
  border: 1px solid #ccc;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dropdown {
    position: absolute;
    background-color: #fff;
    right: 0px;
    width: 20px;
  }
  .el-tree-node:focus > .el-tree-node__content .el-dropdown {
    background-color: #f5f7fa;
  }
  .el-tree-node__content:hover .el-dropdown {
    background-color: #f5f7fa;
  }

  .el-dropdown .el-button {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
